import React,{Component} from 'react'
import { Button,Modal,Input,Form,Table,message } from 'antd'
import {
    ExclamationCircleOutlined
} from '@ant-design/icons';
export default class stu extends Component{
    constructor(props){
        super(props);
        this.state = {
            visible: false,
            dataSource:[],
            _id:"",
            Name:"",
            Age:"",
            Address:"",
            Tel:"",
            Sex:"",
            Identity:"",
            title:"",
            display_name:"none"
        }
    }
    //获取数据
    componentWillMount() {
        var result=[];
        this.axios.get("/stu/findStuAll").then(res=>{
            const data=res.data.result
            if(res.data.code===200){
                data.forEach((item,index)=>{
                    let obj={
                        key:index,
                        _id:item._id,
                        name:item.name,
                        age:item.age,
                        sex:item.sex,
                        address:item.address,
                        tel:item.tel,
                        display_name:'none',
                        identity:item.identity,
                    }
                    result.push(obj)
                })
                this.setState({
                    dataSource :result
                })
            }else{
                message.error("没有对应数据");
            }
        })
    }
    //弹框设置是否显示
    showModal = () => {
        this.setState({
            visible: true,
            title:"新增学生信息",
            _id:"",
            Name:"",
            Age:"",
            Sex:"",
            Tel:"",
            Address:"",
            Identity:""
        });
    };
    //姓名
    changeName(e){
        this.setState({
            Name:e.target.value
        })
    }
    //年龄
    changeAge(e){
        this.setState({
            Age:e.target.value
        })
    }
    //地址
    changeAddress(e){
        this.setState({
            Address:e.target.value
        })
    }
    //电话
    changeTel(e){
        this.setState({
            Tel:e.target.value
        })
    }
    //性别
    changeSex(e){
        this.setState({
            Sex:e.target.value
        })
    }
    //身份证号
    changeIdentity(e){
        this.setState({
            Identity:e.target.value
        })
    }
    //弹框确定按钮
    hideModalOk=()=>{
        const url = this.state.title === "新增学生信息" ? "addStu" : `updStu/${this.state._id}`;
        this.axios.post(`/stu/${url}`,{
            name:this.state.Name,
            age:this.state.Age,
            sex:this.state.Sex,
            identity:this.state.Identity,
            address:this.state.Address,
            tel:this.state.Tel
        }).then(res=>{
            if(res.data.code===200){
                message.success("操作成功");
                this.setState({
                    visible: false,
                })
                window.location.reload();
            }else{
                message.error("操作失败")
            }
        })
    }
    //弹框取消按钮
    hideModalCancel = () => {
        this.setState({
            visible: false,
        });
    };
    //编辑
    stuEdit=(item)=>{
        this.setState({
            visible: true,
            title:"编辑学生信息",
            _id:item._id,
            Name:item.name,
            Age:item.age,
            Sex:item.sex,
            Tel:item.tel,
            Address:item.address,
            Identity:item.identity
        });
    }
    //删除
    stuDel=(item)=>{
        Modal.confirm({
            title: '确认删除此条信息吗?',
            icon: <ExclamationCircleOutlined/>,
            content: '',
            okText: '是',
            okType: 'danger',
            cancelText: '否',
            onOk: () => {
                this.axios.post(`/stu/delStu/${item._id}`).then(res=>{
                    if(res.data.code===200){
                        message.success("删除成功");
                        window.location.reload();
                    }else{
                        message.error("删除失败")
                    }
                })
            }, onCancel() {},
        });
    }
    render(){
        const columns = [
            {
                title: '序号',
                dataIndex: '_id',
                key: '_id',
            },
            {
                title: '姓名',
                dataIndex: 'name',
                key: 'name',
            },
            {
                title: '地址',
                dataIndex: 'address',
                key: 'address',
            },
            {
                title: '电话',
                dataIndex: 'tel',
                key: 'tel',
            },
            {
                title: '年龄',
                dataIndex: 'age',
                key: 'age',
            },
            {
                title: '性别',
                dataIndex: 'sex',
                key: 'sex',
            },
            {
                title: '身份证号',
                dataIndex: 'identity',
                key: 'identity',
            },
            {
                title: '操作',
                key: 'action',
                align: 'center',
                //record获取Table中整行的数据
                render: (text, record)=>(
                    <label>
                        <a onClick={this.stuEdit.bind(this, record)}>编辑</a>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <a onClick={this.stuDel.bind(this,record)}>删除</a>
                    </label>
                )
           }
        ];
        return(
            <div className="stuContent">
                <Button type="primary" onClick={this.showModal}>新增学生信息</Button>
                <Modal
                    title={this.state.title}
                    visible={this.state.visible}
                    onOk={this.hideModalOk}
                    onCancel={this.hideModalCancel}
                    okText="确认"
                    cancelText="取消"
                    destroyOnClose
                >
                    <Form name="basic">
                        {/*initialValue：设置初始值*/}
                        <Form.Item name="_id" label="序号" style={{display:this.state.display_name}} initialValue={this.state._id}>
                            <Input value={this.state._id} style={{width:'60px'}} placeholder="请输入序号"/>
                        </Form.Item>
                        <span>姓名:</span>
                        <Form.Item name="Name"  initialValue={this.state.Name}>
                            <Input value={this.state.Name} placeholder="请输入姓名" onChange={this.changeName.bind(this)}/>
                        </Form.Item>
                        <span>年龄:</span>
                        <Form.Item name="Age"  initialValue={this.state.Age}>
                            <Input value={this.state.Age} placeholder="请输入年龄" onChange={this.changeAge.bind(this)}/>
                        </Form.Item>
                        <span>地址:</span>
                        <Form.Item name="Address" initialValue={this.state.Address}>
                            <Input value={this.state.Address} placeholder="请输入地址" onChange={this.changeAddress.bind(this)}/>
                        </Form.Item>
                        <span>电话:</span>
                        <Form.Item name="Tel" initialValue={this.state.Tel}>
                            <Input value={this.state.Tel} placeholder="请输入电话" onChange={this.changeTel.bind(this)}/>
                        </Form.Item>
                        <span>性别:</span>
                        <Form.Item name="Sex" initialValue={this.state.Sex}>
                            <Input value={this.state.Sex} placeholder="请输入性别" onChange={this.changeSex.bind(this)}/>
                        </Form.Item>
                        <span>身份证:</span>
                        <Form.Item name="Identity" initialValue={this.state.Identity}>
                            <Input value={this.state.Identity} placeholder="请输入身份证号" onChange={this.changeIdentity.bind(this)}/>
                        </Form.Item>
                    </Form>
                </Modal>
                <div className="stuContentTable" style={{marginTop:'16px'}}>
                    <Table dataSource={this.state.dataSource} columns={columns} bordered/>
                </div>
            </div>
        )
    }
}